<template>
  <div>
    <el-form ref="searchform" :model="search" inline style="margin-top: 20px;">
      <el-form-item label="项目名" label-width="80px">
        <el-input placeholder="请输入项目名" v-model='search.name'></el-input>
      </el-form-item>
      <el-form-item label="日期选择" label-width="90px">
        <el-date-picker value-format="yyyy-MM-dd" placeholder="请选择开始日期" v-model="search.startDate"></el-date-picker>
      </el-form-item>
      <el-form-item label="-" label-width="10px">
        <el-date-picker value-format="yyyy-MM-dd" placeholder="请选择结束日期" v-model="search.endDate"></el-date-picker>
      </el-form-item>
      <el-form-item label="项目状态" label-width="90px">
        <el-select placeholder="请选择项目状态" v-model="search.status">
          <el-option label="挂起" value="1"></el-option>
          <el-option label="正常" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="cx">查询</el-button>
        <el-button type="primary" @click="cz">重置</el-button>
        <el-button type="primary" @click="addxs=true">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="项目名" width="180" align="center"></el-table-column>
      <el-table-column prop="leader" label="负责人" width="180" align="center"></el-table-column>
      <el-table-column prop="startDate" label="开始日期" width="180" align="center"></el-table-column>
      <el-table-column prop="endDate" label="结束日期" width="180" align="center"></el-table-column>
      <el-table-column label="项目状态" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.status==1?'挂起':'正常' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="xg(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="sc(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible='xgxs' title="修改项目" width="30%">
      <el-form ref="xgform" :model="xgform" :rules="rule">
        <el-form-item label="项目名" label-width="80px" prop="name">
          <el-input placeholder="请输入项目名" v-model="xgform.name"></el-input>
        </el-form-item>
        <el-form-item label="负责人" label-width="80px" prop="leader">
          <el-input placeholder="请输入负责人" v-model="xgform.leader"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" label-width="80px" prop="startDate">
          <el-date-picker value-format="yyyy-MM-dd" v-model="xgform.startDate" placeholder="请选择开始日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" label-width="80px" prop="endDate">
          <el-date-picker value-format="yyyy-MM-dd" v-model="xgform.endDate" placeholder="请选择结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="项目状态" label-width="80px" prop="status">
          <el-select placeholder="请选择项目状态" v-model="xgform.status">
            <el-option label="挂起" value="1"></el-option>
            <el-option label="正常" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xgqx()">取 消</el-button>
        <el-button type="primary" @click="xgqd()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible='addxs' title="添加项目管理"  width="30%">
      <el-form ref="addform" :model="addform" :rules="rule">
        <el-form-item label="项目名" label-width="80px" prop="name">
          <el-input placeholder="请输入项目名" v-model="addform.name"></el-input>
        </el-form-item>
        <el-form-item label="负责人" label-width="80px" prop="leader">
          <el-input placeholder="请输入负责人" v-model="addform.leader"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" label-width="80px" prop="startDate">
          <el-date-picker value-format="yyyy-MM-dd" v-model="addform.startDate" placeholder="请选择开始日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" label-width="80px" prop="endDate">
          <el-date-picker value-format="yyyy-MM-dd" v-model="addform.endDate" placeholder="请选择结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="项目状态" label-width="80px" prop="status">
          <el-select placeholder="请选择项目状态" v-model="addform.status">
            <el-option label="挂起" value="1"></el-option>
            <el-option label="正常" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addqx()">取 消</el-button>
        <el-button type="primary" @click="addqd()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listAll,
    deleteone,
    addone
  } from '@/api/rw.js'
import { updateone } from '../../api/rw.js';
  export default {
    data() {
      return {
        tableData: [],
        rule: {
          name: [{
            required: true,
            message: '不能为空'
          }],
          leader: [{
            required: true,
            message: '不能为空'
          }],
          startDate: [{
            required: true,
            message: '不能为空'
          }],
          endDate: [{
            required: true,
            message: '不能为空'
          }],
          status: [{
            required: true,
            message: '不能为空'
          }]
        },
        xgxs: false,
        xgform: {},
        search: {},
        addform:{},
        addxs:false
      }
    },
    methods: {
      async select(data) {
        let r = await listAll(data)
        console.log(r);
        this.tableData = r.data.reverse()
      },
      async xg(i) {
        this.xgform = i
        this.xgxs = true
      },
      async sc(i) {
        let r = await deleteone({
          id: parseInt(i.id)
        })
        this.select()
        this.$message({
          message: r.msg,
          type: 'success'
        })
      },
      xgqx() {
        this.xgxs = false
        this.$refs['xgform'].resetFields();
      },
      xgqd() {
        this.$refs['xgform'].validate(async (a) => {
          if (a) {
            let r = await updateone(this.xgform)
            console.log(r);
            this.select()
            this.xgxs = false
          }
        })
      },
      addqx(){
        this.addxs = false
        this.$refs['addform'].resetFields();
      },
      addqd(){
        this.$refs['addform'].validate(async (a) => {
          if (a) {
            let r = await addone(this.addform)
            this.select()
            this.addform = {}
            this.addxs = false
            console.log(r);
          }
        })
      },
      cx(){
        console.log(this.search);
        this.select(this.search)
      },
      cz(){
        this.search = {}
        this.select()
      }
    },
    async mounted() {
      this.select()
    }
  }
</script>

<style>
</style>
